<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    1. rect 矩形 
    2. width、height、x、y、rx 和 ry 是 rect（矩形）基本的六个属性
    3. width 和 height 分别定义宽度和高度； 
    4. x 和 y分别定义左上角距离视口左上角的坐标
    5. rx 和 ry 分别定义角的水平边和垂直边的半径
     -->
    <svg
      width="200"
      height="200"
      xmlns="http://www.w3.org/2000/svg"
      style="background-color: pink"
    >
      <rect width="50" height="50" x="10" y="10" rx="25" ry="25"></rect>
      <!-- 红色边框 -->
      <!-- 可以直接定义属性，也可以通过 style -->
      <rect
        width="50"
        height="50"
        x="70"
        y="10"
        rx="25"
        ry="25"
        stroke="red"
        stroke-width="3"
        fill="rgb(0, 0, 255)"
        stroke-opacity="0.5"
        fill-opacity="0.1"
      ></rect>
      <rect
        width="50"
        height="50"
        x="130"
        y="10"
        rx="25"
        ry="25"
        style="
          stroke: red;
          stroke-width: 3px;
          fill: rgb(0, 0, 255);
          stroke-opacity: 0.5;
          fill-opacity: 0.1;
        "
      ></rect>
    </svg>
  </body>
</html>
